<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>

    <style>
        .box{
            width: 100px;
            height: 100px;

        }
    </style>
</head>
<body>
    <div id="app">
        <!-- :style 是 v-bind:style 的缩写 -->
        <!-- 获取style动态属性三种方式 -->
        <!-- 模板字符串写法 -->
        <div class="box" :style="`background:${isRed?'#333':'#369'}`"></div>
        <!-- 使用对象方法书写 -->
        <div class="box" :style="{background:isRed?'#361122':'#141414'}"></div>
        <!-- 使用功能数组方法书写 -->
        <div class="box" :style="[{background:isRed?'teal':'yellow'}]"></div>
        <!-- 可以先定义好属性后，再添加到数组中 -->
        <div class="box" :style="[style1,style2]"></div>
    </div>

    <script>
        Vue.config.productionTip=false;
        const vm = new Vue({
            el:'#app',
            data(){
                return {
                    isRed:true,
                    style1:{
                        border:'1px solid #ccc'
                    },
                    style2:{
                        background:'green'
                    }
                }
            }
        })


    </script>

</body>
</html>